<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;}
            #menudiv2:hover{background-color: #FF6600;color: #1A3665}
        </style>  
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            }      
            @media screen and (-webkit-min-device-pixel-ratio:0)
            {
                #fix1 { margin-top: 0px }
                #detail{margin-top: 8px}
                #reason{margin-top: 32px}
            }
            @-moz-document url-prefix()
            {
                #fix1 { margin-top: -20px }
            #detail{margin-top: 12px}
            #nameSchool, #company {margin-top: -2px}  
            #reason{margin-top: 47px}
            }
        </style>
        <script>
            function enableEdu()
            {
                var x=document.getElementById("form1:clearText1");
                if(x.value == '')
                {                    
                    document.getElementById("form1:clearText2").value = ''
                    document.getElementById("form1:clearText3").value = ''
                    document.getElementById("form1:clearText4").value = ''
                }
                
            }
            function enableLoc()
            {
                var x=document.getElementById("form1:clearText5");
                if(x.value == '')
                {                    
                    document.getElementById("form1:clearText6").value = ''
                    document.getElementById("form1:clearText7").value = ''
                    document.getElementById("form1:clearText8").value = ''
                    document.getElementById("form1:clearText9").value = ''
                }
            }
            function clearTextEdu()
            {
                document.getElementById("form1:clearText1").value = ''
                document.getElementById("form1:clearText2").value = ''
                document.getElementById("form1:clearText3").value = ''
                document.getElementById("form1:clearText4").value = ''
                document.getElementById("form1:clearText1").focus()
            }
            function clearTextLoc()
            {              
                document.getElementById("form1:clearText5").value = ''
                document.getElementById("form1:clearText6").value = ''
                document.getElementById("form1:clearText7").value = ''
                document.getElementById("form1:clearText8").value = ''
                document.getElementById("form1:clearText9").value = ''
                document.getElementById("form1:clearText5").focus()
            }
        </script>
    </h:head>
    <h:body  style="background-color:  #1A3665">
        <f:view locale="#{languageBean.locale}">

            <div style="width: 1000px;margin: auto;margin-top: 20px;background-color: white;border-radius: 10px;-moz-border-radius: 10px">
                <ui:include src="headertemplate1.xhtml" />
                <h:form id="form1">
                    <div>
                        <ul style="margin-top: 50px;margin-left: -20px">
                            <li style="display: inline-block;width: 200px">
                                <ul>
                                    <li style="list-style: none;background-image: url('images/treeTabBg.gif');padding: 0px 0px 5px 55px;font-size: 20px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: #E9E9E9">Step 1 <img src="images/done.png" width="25" height="25" style="" alt="done"/>

                                    </li>
                                    <li style="list-style: none;overflow: hidden;background-image: url('images/treeTabBg.gif');padding: 5px 0px 5px 55px;font-size: 20px;margin-top: 5px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: #E9E9E9">Step 2 <img src="images/Pause.png" width="20" height="20" style="" alt="done"/></li>
                                    <li style="list-style: none;overflow: hidden;background-image: url('images/treeTabBg.gif');padding: 5px 0px 5px 55px;font-size: 20px;margin-top: 5px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: #E9E9E9">Step 3</li>
                                    <li style="list-style: none;overflow: hidden;background-image: url('images/treeTabBg.gif');padding: 5px 0px 5px 45px;font-size: 20px;margin-top: 5px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: #E9E9E9">Preview</li>
                                </ul>
                            </li>
                            <li style="display: inline-block;width: 670px;vertical-align: top;margin-left: 40px;border: 1px;border-style: double dashed;border-top-right-radius: 10px;-moz-border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;border-top-left-radius: 10px">
                                <div style="font-size: 20px;font-weight: bold;border: 1px;border-bottom-style:  dotted;padding : 20px 0px 5px 20px">
                                    <font style="color: #FF6600">Step 2 : Your history</font> <font style="color: blue">( can skip )</font>
                                </div>
                                <div style="font-size: 20px;font-weight: bold;padding : 20px 0px 0px 50px">
                                    <font style="color: #FF6600"> - Education / Training</font>
                                </div>
                                <hr style="width: 560px;margin-left: 50px"/>
                                <div style="margin-top: 15px">
                                    <ul>
                                        <li style="display: inline-block;margin-left: -30px;font-weight: bold;vertical-align: top;text-align: right;width: 180px">
                                            <ul id="nameSchool">
                                                <li style="list-style: none">Name of school :</li>                                        
                                            </ul>
                                            <ul id="degree" style="margin-top: 15px">
                                                <li style="list-style: none">Degree level :</li>                                        
                                            </ul>
                                            <ul id="field" style="margin-top: 13px">
                                                <li style="list-style: none">Field of study :</li>                                        
                                            </ul> 
                                            <ul id="from" style="margin-top: 14px">
                                                <li style="list-style: none">From :</li>                                        
                                            </ul>
                                            <ul id="archie" style="margin-top: 10px">
                                                <li style="list-style: none">Achievement :</li>                                        
                                            </ul>
                                        </li>
                                        <li style="display: inline-block;margin-left: -15px">
                                            <ul >
                                                <li style="list-style: none;"><h:inputText value="#{workerCreateCV.edu.nameSchool}" id="clearText1" style="width:170px" onblur="enableEdu()"/> </li>
                                                <li style="list-style: none" id="detail"><h:inputText value="#{workerCreateCV.edu.degeeLevel}" id="clearText2" style="width:170px" /> </li>
                                                <li style="list-style: none" id="detail"><h:inputText value="#{workerCreateCV.edu.fildOfStudy}" id="clearText3" style="width:170px" /> </li>                                        
                                            </ul>
                                            <ul id="detail">
                                                <li style="display: inline">
                                                    <h:selectOneMenu value="#{workerCreateCV.monthofFromEdu}" style="width:100px">
                                                        <f:selectItem itemValue="January" itemLabel="January" />
                                                        <f:selectItem itemValue="February" itemLabel="February" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline">
                                                    <h:selectOneMenu value="#{workerCreateCV.yearofFromEdu}" style="width:70px">
                                                        <f:selectItem itemValue="1988" itemLabel="1988" />
                                                        <f:selectItem itemValue="1989" itemLabel="1989" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline;font-weight: bold;margin-left: 15px">To :</li>
                                                <li style="display: inline;margin-left: 15px">
                                                    <h:selectOneMenu value="#{workerCreateCV.monthofToEdu}" style="width:100px" >
                                                        <f:selectItem itemValue="January" itemLabel="January" />
                                                        <f:selectItem itemValue="February" itemLabel="February" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline">
                                                    <h:selectOneMenu value="#{workerCreateCV.yearofToEdu}" style="width:70px" >
                                                        <f:selectItem itemValue="1988" itemLabel="1988" />
                                                        <f:selectItem itemValue="1989" itemLabel="1989" />
                                                    </h:selectOneMenu>
                                                </li>
                                            </ul>
                                            <ul id="detail">
                                                <li style="list-style: none;"><h:inputTextarea value="#{workerCreateCV.edu.achiement}" id="clearText4" style="width:170px;resize: none" /></li>
                                            </ul>
                                            <ul>
                                                <li style="list-style: none;margin-top: 10px;margin-left: 60px">
                                                    <p:commandButton oncomplete="clearTextEdu()" update="form1,output1" action="#{workerCreateCV.addEduToList()}"  value="Save" style="background-image: url('images/treeTabBg.gif');border: 1px;border-style: solid;border-radius: 5px;-moz-border-radius: 5px;border-color: #E9E9E9;font-size: 80% ;font-weight: bold;">

                                                    </p:commandButton>
                                                </li>
                                            </ul>
                                        </li>
                                        <li style="list-style: none;margin-top: 10px">
                                            <table style="width: 580px">
                                                <tr style="background-image: url('images/treeTabBg.gif');color: blue;text-align: center">
                                                    <th style="width: 40%;border: 1px solid #cccccc;border-right-style: none;border-top-left-radius: 5px;-moz-border-top-left-radius: 5px">
                                                        Name of School
                                                    </th>
                                                    <th style="width: 25%;border:1px #cccccc;border-top-style: solid;border-bottom-style: solid">
                                                        Degree Level
                                                    </th>
                                                    <th style="width: 25%;border:1px #cccccc;border-top-style: solid;border-bottom-style: solid">
                                                        Field of Study
                                                    </th>
                                                    <th style="border: 1px solid #cccccc;border-left-style: none;border-top-right-radius: 5px;-moz-border-top-right-radius: 5px">
                                                        Remove
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <h:panelGrid id ="wrapper1">
                                                        <h:dataTable value="#{workerCreateCV.listEdu}" style="width: 605px;table-layout:fixed;margin-left: -44px" var="p" id="output1" >
                                                            <h:column>
                                                                <td style="width: 225px;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.nameSchool}"/>
                                                                </td>
                                                                <td style="width: 24%;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.degeeLevel}"/>
                                                                </td>
                                                                <td style="width: 24%;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.fildOfStudy}"/>
                                                                </td>
                                                                <td style="border: 1px;border-bottom-style: dashed">
                                                                    <p:commandButton update=":form1:wrapper1" value="[X]" action="#{workerCreateCV.deleteEduToList(p)}"  style="border: none;background-color: white;font-weight: bold;font-size: 80%;text-align: right;color: red"  >

                                                                    </p:commandButton>                                                                
                                                                </td>
                                                            </h:column>
                                                        </h:dataTable>
                                                    </h:panelGrid>
                                                </tr>
                                            </table>
                                        </li>
                                    </ul>

                                </div>
                                <div style="font-size: 20px;font-weight: bold;padding : 20px 0px 0px 50px">
                                    <font style="color: #FF6600"> - Employment history</font>
                                </div>
                                <hr style="width: 560px;margin-left: 50px"/>
                                <div style="margin-top: 15px">
                                    <ul>
                                        <li style="display: inline-block;margin-left: -30px;text-align: right;width: 180px;font-weight: bold;vertical-align: top">
                                            <ul id="company">
                                                <li style="list-style: none">Company :</li>
                                            </ul>                                            
                                            <ul style="margin-top: 14px">
                                                <li style="list-style: none">Category :</li>
                                            </ul> 
                                            <ul style="margin-top: 13px">
                                                <li style="list-style: none">From :</li>
                                            </ul>
                                            <ul style="margin-top: 13px">
                                                <li style="list-style: none">Job level :</li>
                                            </ul>
                                            <ul style="margin-top: 10px">
                                                <li style="list-style: none">Main duties :</li>
                                            </ul>
                                            <ul id="reason" >
                                                <li style="list-style: none">Reason for leaving :</li>
                                            </ul>

                                        </li>
                                        <li style="display: inline-block;margin-left: -15px">
                                            <ul>
                                                <li style="list-style: none;"><h:inputText value="#{workerCreateCV.emhis.company}" id="clearText5" onblur="enableLoc()" style="width:170px" /></li>

                                                <li style="list-style: none;" id="detail"><h:inputText value="#{workerCreateCV.emhis.category}" style="width:170px" id="clearText6"/></li>
                                            </ul>
                                            <ul id="detail">
                                                <li style="display: inline;">
                                                    <h:selectOneMenu value="#{workerCreateCV.monthofFromEmHis}" style="width:100px" >
                                                        <f:selectItem itemValue="January" itemLabel="January" />
                                                        <f:selectItem itemValue="February" itemLabel="February" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline;">
                                                    <h:selectOneMenu value="#{workerCreateCV.yearofFromEmHis}" style="width:70px" >
                                                        <f:selectItem itemValue="1988" itemLabel="1988" />
                                                        <f:selectItem itemValue="1989" itemLabel="1989" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline;font-weight: bold;margin-left: 15px">To :</li>
                                                <li style="display: inline;margin-left: 15px">
                                                    <h:selectOneMenu value="#{workerCreateCV.monthofToEmHis}" style="width:100px" >
                                                        <f:selectItem itemValue="January" itemLabel="January" />
                                                        <f:selectItem itemValue="February" itemLabel="February" />
                                                    </h:selectOneMenu>
                                                </li>
                                                <li style="display: inline;">
                                                    <h:selectOneMenu value="#{workerCreateCV.yearofToEmHis}" style="width:70px" >
                                                        <f:selectItem itemValue="1988" itemLabel="1988" />
                                                        <f:selectItem itemValue="1989" itemLabel="1989" />
                                                    </h:selectOneMenu>
                                                </li>
                                            </ul>
                                            <ul id="detail">
                                                <li style="list-style: none"><h:inputText value="#{workerCreateCV.emhis.jobLevel}" style="width:170px" id="clearText7"/></li>
                                                <li style="list-style: none" id="detail"><h:inputTextarea value="#{workerCreateCV.emhis.mainDuties}" style="width:170px;resize: none" id="clearText8"/></li>
                                                <li style="list-style: none" id="detail"><h:inputTextarea value="#{workerCreateCV.emhis.resonLeaving}" style="width:170px;resize: none" id="clearText9"/></li>
                                            </ul>
                                            <ul>
                                                <li style="list-style: none;margin-top: 10px;margin-left: 60px">
                                                    <p:commandButton oncomplete="clearTextLoc()" update="form1,output2"  action="#{workerCreateCV.addEmpToList()}"  value="Save" style="background-image: url('images/treeTabBg.gif');border: 1px;border-style: solid;border-radius: 5px;-moz-border-radius: 5px;border-color: #E9E9E9;font-weight: bold;font-size: 80%">

                                                    </p:commandButton>
                                                </li>
                                            </ul>
                                        </li>  
                                        <li style="list-style: none;margin-top: 10px">
                                            <table style="width: 580px">
                                                <tr style="background-image: url('images/treeTabBg.gif');color: blue;text-align: center">
                                                    <th style="width: 40%;border: 1px solid #cccccc;border-right-style: none;border-top-left-radius: 5px;-moz-border-top-left-radius: 5px">
                                                        Company
                                                    </th>
                                                    <th style="width: 25%;border:1px #cccccc;border-top-style: solid;border-bottom-style: solid">
                                                        Category
                                                    </th>
                                                    <th style="width: 25%;border:1px #cccccc;border-top-style: solid;border-bottom-style: solid">
                                                        Job level
                                                    </th>
                                                    <th style="border: 1px solid #cccccc;border-left-style: none;border-top-right-radius: 5px;-moz-border-top-right-radius: 5px">
                                                        Remove
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <h:panelGrid id ="wrapper2">
                                                        <h:dataTable value="#{workerCreateCV.listEmpHist}" style="width: 605px;table-layout:fixed;margin-left: -44px" var="p" id="output2" >
                                                            <h:column>
                                                                <td style="width: 225px;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.company}"/>
                                                                </td>
                                                                <td style="width: 24%;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.category}"/>
                                                                </td>
                                                                <td style="width: 24%;overflow: auto;border: 1px;border-right-style: dotted;border-bottom-style: dashed">
                                                                    <h:outputText value="#{p.jobLevel}"/>
                                                                </td>
                                                                <td style="border: 1px;border-bottom-style: dashed">
                                                                    <p:commandButton update=":form1:wrapper2" value="[X]" action="#{workerCreateCV.deleteEmpToList(p)}"  style="border: none;background-color: white;font-weight: bold;font-size: 80%;text-align: right;color: red"  >

                                                                    </p:commandButton>                                                                
                                                                </td>
                                                            </h:column>
                                                        </h:dataTable>
                                                    </h:panelGrid>
                                                </tr>
                                            </table>
                                        </li>
                                    </ul>
                                    <ul style="margin-top: 30px;margin-left: 50px;border:1px;border-top-style: dotted;width: 520px">
                                        <div style="margin-top: 20px">
                                            <li style="display: inline;font-size: 20px;background-color: #1A3665;padding: 5px 10px 5px 10px"><a href="createCVStep1.xhtml" style="color: white;">Back</a></li>
                                            <li style="display: inline;margin-left: 360px"><h:commandButton action="#{workerCreateCV.moveto3()}"  value="Next"  style="border: none;color: white;font-size: 18px;background-color: #1A3665;padding: 5px 10px 5px 10px;cursor: pointer"/></li>
                                        </div>
                                    </ul>
                                </div>
                                <br/>
                                <br/>
                            </li>
                        </ul>
                    </div>
                    <br/>
                    <br/>
                </h:form>
            </div>
            <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
                <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                    Copyright © by Group 1
                    <br />
                    Project Name : Work to Worker
                    <br />
                    Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
                </div>
            </div>

        </f:view>
    </h:body>
</html>

